<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .canvas {
                display: block;
                margin: 25px auto;
                border: 1px solid #aaa;
            }
        </style>
        <script>
            addEventListener("load", function () {
                const cvs = document.querySelector(".canvas");
                cvs.width = 650;
                cvs.height = 650;
                const ctx = cvs.getContext("2d");
                /*
                纯净的矩形（不描边、不填充）
                    ctx.rect(x,y,width,height);
                描边矩形
                    ctx.strokeRect(x,y,width,height);
                填充矩形
                    ctx.fillRect(x,y,width,height);
                挖空
                    ctx.clearRect(x,y,width,height);
                    在指定矩形中，清除一块矩形区域的像素（包括边界）
                    注意写在最后面，毕竟代码自上而下执行
                
                关于rect
                    rect不含fill，要填充时要加fill，而fillRect自带fill
                    rect不含stroke，要描边时要加stroke，而strokeRect自带stroke
                */

                // 第1种：填充矩形
                ctx.fillStyle = "gold"; // 要在fillRect()之前才会生效
                // ctx.fillRect(20, 20, 450, 300);

                // 第2种：描边矩形
                // ctx.strokeStyle = "red"; // 要在其它stroke属性之前才会生效
                // ctx.strokeRect(20, 20, 450, 300);

                // 第3种：需要填充、或描边
                ctx.rect(20, 20, 450, 300);
                ctx.fill(); // 填充
                // ctx.stroke(); // 描边

                // 第4种：挖空矩形
                ctx.clearRect(50, 0, 200, 100); // 在后面定义，那一块区域才会清除
            });
        </script>
    </head>
    <body>
        <canvas class="canvas">你的浏览器不支持canvas，请升级浏览器版本或更换浏览器！</canvas>
    </body>
</html>
